<template>
  <div>
    <div class="gva-table-box">
      <el-table
        ref="multipleTable"
        style="width: 100%"
        tooltip-effect="dark"
        :data="topicList"
        row-key="ID"
        border
        @sort-change="dataSort"
      >
        <el-table-column
          width="60px"
          align="left"
          label="ID"
          prop="id"
        />
        <el-table-column
          align="left"
          label="话题"
          prop="title"
        />
        <el-table-column
          align="left"
          label="图片"
          min-width="75"
        >
          <template #default="scope">
            <CustomPic
              style="margin-top:8px;"
              :pic-src="scope.row.pic"
              @click="openUrl(scope.row.pic)"
            />
          </template>
        </el-table-column>

        <el-table-column
          align="left"
          label="总播放次数"
          prop="playCount"
        />
        <el-table-column
          align="left"
          label="总用户数"
          prop="userCount"
        />

        <el-table-column
          align="left"
          label="昨日新增播放次数"
          prop="playInc"
          sortable
          :sort-method="(a,b)=>{return a._playInc - b._playInc}"
        />
        <el-table-column
          align="left"
          label="昨日新增用户数"
          prop="userInc"
          sortable
          :sort-method="(a,b)=>{return a._userInc - b._userInc}"
        />
        <el-table-column
          align="left"
          label="操作"
          fixed="right"
        >
          <template #default="scope">
            <el-button
              type="primary"
              link
              icon=""
              class="table-button"
              @click="getDetails(scope.row)"
            >数据详情</el-button>
            <el-button
              type="primary"
              link
              icon=""
              @click="getLists(scope.row)"
            >内容列表</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10]"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="dialogFormVisible"
      :before-close="closeDialog"
      :title="type==='create'?'添加':'修改'"
      destroy-on-close
    >
      <el-scrollbar height="200px">
        <el-form
          ref="elFormRef"
          :model="formData"
          label-position="right"
          :rules="rule"
          label-width="100px"
        >
          <el-form-item
            label="游戏名称:"
            prop="name"
          >
            <el-input
              v-model="formData.name"
              :clearable="true"
              placeholder="请输入游戏名称"
            />
          </el-form-item>
          <el-form-item
            v-if="type==='update'"
            label="GameHash:"
            prop="game_hash"
          >
            <el-input
              v-model="formData.game_hash"
              :disabled="type==='update'"
              :clearable="true"
            />
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button
            type="primary"
            @click="enterDialog"
          >确 定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {
  createQmGameList,
  deleteQmGameList,
  deleteQmGameListByIds,
  updateQmGameList,
  findQmGameList,
  getQmGameListList
} from '@/api/qmGameList'

// 全量引入格式化工具 请按需保留
import { getDictFunc, formatDate, formatBoolean, filterDict, ReturnArrImg, onDownloadFile } from '@/utils/format'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import CustomPic from '@/components/customPic/index.vue'
import { useRouter, useRoute } from 'vue-router'

import {
  getHugeList
} from '@/api/openApi'

defineOptions({
  name: 'QmTopicList'
})

const router = useRouter()
const route = useRoute()

// 自动化生成的字典（可能为空）以及字段
const formData = ref({
  name: '',
})

// 验证规则
const rule = reactive({
  name: [{
    required: true,
    message: '请输入游戏名称',
    trigger: ['input', 'blur'],
  },
  {
    whitespace: true,
    message: '不能只输入空格',
    trigger: ['input', 'blur'],
  }
  ],
  platform: [{
    required: true,
    message: '请选择渠道',
    trigger: ['change'],
  }
  ],
  appid: [{
    required: true,
    message: '请输入appid',
    trigger: ['input', 'blur'],
  },
  {
    whitespace: true,
    message: '不能只输入空格',
    trigger: ['input', 'blur'],
  }
  ],
  secret: [{
    required: true,
    message: '请输入secret',
    trigger: ['input', 'blur'],
  },
  {
    whitespace: true,
    message: '不能只输入空格',
    trigger: ['input', 'blur'],
  }
  ],
})

const searchRule = reactive({
  createdAt: [
    { validator: (rule, value, callback) => {
      if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
        callback(new Error('请填写结束日期'))
      } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
        callback(new Error('请填写开始日期'))
      } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt.getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value.endCreatedAt.getTime())) {
        callback(new Error('开始日期应当早于结束日期'))
      } else {
        callback()
      }
    }, trigger: 'change' }
  ],
})

const elFormRef = ref()
const elSearchFormRef = ref()

// =========== 表格控制部分 ===========
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})

// 重置
const onReset = () => {
  searchInfo.value = {}
  getTopicList()
}

// 搜索
const onSubmit = () => {
  elSearchFormRef.value?.validate(async(valid) => {
    if (!valid) return
    page.value = 1
    pageSize.value = 10
    getTopicList()
  })
}

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val
  getTopicList()
}

// 修改页面容量
const handleCurrentChange = (val) => {
  page.value = val
  getTopicList()
}

// 查询

var order = ''

var dataSort = function(column) {
  if (column.order == null) {
    order = ''
    getTopicList()
  } else {
    order = (column.order == 'ascending') ? column.prop + ' asc' : column.prop + ' desc'
    getHugeList({ type: 'collectTopicList', add_params: order, page: 1 }).then(res => {
      if (res.code === 0) {
        topicList.value = []
        res.data.list.forEach(item => {
          const value = JSON.parse(item.response)
          value._userCount = value.userCount
          value._playCount = value.playCount
          value._playInc = value.playInc
          value._userInc = value.userInc
          value.userCount = addCommas(value.userCount)
          value.playCount = addCommas(value.playCount)
          value.playInc = addCommas(value.playInc)
          value.userInc = addCommas(value.userInc)
          topicList.value.push(value)
        })
        total.value = res.data.total
        page.value = res.data.page
      }
    })
  }
}

const topicList = ref([])
const getTopicList = () => {
  getHugeList({ type: 'collectTopicList', add_params: order, page: page.value }).then(res => {
    if (res.code === 0) {
      topicList.value = []
      res.data.list.forEach(item => {
        const value = JSON.parse(item.response)
        value._userCount = value.userCount
        value._playCount = value.playCount
        value._playInc = value.playInc
        value._userInc = value.userInc
        value.userCount = addCommas(value.userCount)
        value.playCount = addCommas(value.playCount)
        value.playInc = addCommas(value.playInc)
        value.userInc = addCommas(value.userInc)
        topicList.value.push(value)
      })

      total.value = res.data.total
      page.value = res.data.page
    }
  })
}
getTopicList()

// ============== 表格控制部分结束 ===============
const platformOptions = ref([])
// 获取需要的字典 可能为空 按需保留
const setOptions = async() => {
  platformOptions.value = await getDictFunc('platform')
}

// 获取需要的字典 可能为空 按需保留
setOptions()

// 多选数据
const multipleSelection = ref([])
// 多选
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 删除行
const deleteRow = (row) => {
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteQmGameListFunc(row)
  })
}

// 批量删除控制标记
const deleteVisible = ref(false)

// 多选删除
const onDelete = async() => {
  const IDs = []
  if (multipleSelection.value.length === 0) {
    ElMessage({
      type: 'warning',
      message: '请选择要删除的数据'
    })
    return
  }
  multipleSelection.value &&
        multipleSelection.value.map(item => {
          IDs.push(item.ID)
        })
  const res = await deleteQmGameListByIds({ IDs })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    if (tableData.value.length === IDs.length && page.value > 1) {
      page.value--
    }
    deleteVisible.value = false
    getTopicList()
  }
}

// 行为控制标记（弹窗内部需要增还是改）
const type = ref('')

// 更新行
const getDetails = async(row) => {
  router.push({ name: 'qmTopicDetail', query: { collectId: row.id }})
}

const getLists = async(row) => {
  router.push({ name: 'collectDataList', query: { collectId: row.id }})
}

const openUrl = async(url) => {
  window.open(url, '_blank')
}

// 删除行
const deleteQmGameListFunc = async(row) => {
  const res = await deleteQmGameList({ ID: row.id })
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: '删除成功'
    })
    if (tableData.value.length === 1 && page.value > 1) {
      page.value--
    }
    getTableData()
  }
}

function addCommas(value) {
  // ①如下方法：处理千分位并保留两位小数
  // return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  // ②如下方法：将整数位处理成千分位，小数位不变
  const parts = String(value).split('.')
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  return parts.join('.')
}

// 弹窗控制标记
const dialogFormVisible = ref(false)

// 打开弹窗
const openDialog = () => {
  type.value = 'create'
  dialogFormVisible.value = true
}

// 关闭弹窗
const closeDialog = () => {
  dialogFormVisible.value = false
  formData.value = {
    name: '',
    appid: '',
    secret: '',
  }
}
// 弹窗确定
const enterDialog = async() => {
  elFormRef.value?.validate(async(valid) => {
    if (!valid) return

    let res
    switch (type.value) {
      case 'create':
        res = await createQmGameList(formData.value)
        break
      case 'update':
        res = await updateQmGameList(formData.value)
        break
      default:
        res = await createQmGameList(formData.value)
        break
    }
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '创建/更改成功'
      })
      closeDialog()
      getTableData()
    }
  })
}

</script>

<style>

</style>
